<!DOCTYPE HTML>
<html>
<head>
<title>Boomerang Howto #2: Measure perceived performance of content loaded dynamically</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="../boomerang-docs.css">
</head>
<body>
<span style="float:right;"><a href="../">All Docs</a> | <a href="index.html">Index</a></span>
<h1>Boomerang Howto #2:<br>Measure perceived performance of content loaded dynamically</h1>
<p>
See <a href="../use-cases.html#uc-2">use case #2</a> for a description of this requirement.
</p>
<p>
This document attempts to load some content using XHR and measures the time it took to load that
content using boomerang.  This is how you do it:
</p>
<ol>
<li>Copy boomerang.js and the images/ directory into your document root</li>
<li>Add the code below to your page, somewhere before your XHR calls.</li>
</ol>
<pre>
&lt;script src="boomerang.js" type="text/javascript"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
BOOMR.init({
		user_ip: "&lt;user's ip address&gt;",
		beacon_url: "http://yoursite.com/path/to/beacon.php",
		auto_run: false
	});
&lt;/script&gt;
</pre>

<p>
Next fetch your content.  Right before the call to fetch content, start the timer.  The load time timer is called
<code>t_done</code>.  In the callback function where the content has been fetched, call the <code>done()</code>
method.  This measures and beacons back the response time.  I use YUI 3 in the code below, but you could use
anything you like.
</p>

<pre>
YUI().use("io-base", function(Y) {
    var uri = "dynamic-content.txt";
 
    function complete(id, o) {
        var html = o.responseText;
	document.getElementById("dynamic-content").innerHTML = html;
	<em>BOOMR.plugins.RT.done();	// Tell boomerang to measure time and fire a beacon</em>
    };
 
    Y.on('io:complete', complete);
 
    <em>BOOMR.plugins.RT.startTimer("t_done");	// Start measuring download time</em>
    var request = Y.io(uri);
});
 </pre>

<p>
The latest code and docs is available on <a href="http://github.com/yahoo/boomerang/">github.com/yahoo/boomerang</a>
</p>

<p id="results">
</p>

<div id="dynamic-content">
</div>

<script type="text/javascript" src="http://yui.yahooapis.com/combo?3.1.1/build/yui/yui-base-min.js&3.1.1/build/oop/oop-min.js&3.1.1/build/yui/yui-later-min.js&3.1.1/build/event-custom/event-custom-base-min.js&3.1.1/build/querystring/querystring-stringify-simple-min.js&3.1.1/build/io/io-base-min.js"></script>
<script src="../../boomerang.js" type="text/javascript"></script>
<script src="howtos.js" type="text/javascript"></script>
<script type="text/javascript">
BOOMR.init({
		user_ip: '10.0.0.1',
		BW: {
			base_url: '../../images/',
			cookie: 'HOWTO-BA'
		},
		RT: {
			cookie: 'HOWTO-RT'
		}
	});

YUI().use("io-base", function(Y) {
    var uri = "dynamic-content.txt?" + new Date().getTime();
 
    function complete(id, o) {
        var html = "<p>\n" + o.responseText.replace(/^$/mg, '</p>\n<p>') + "\n</p>";
	document.getElementById("dynamic-content").innerHTML = html;
	BOOMR.plugins.RT.done();
    };
 
    Y.on('io:complete', complete);
 
    BOOMR.plugins.RT.startTimer("t_done");
    var request = Y.io(uri);
});
 
</script>
</body>
</html>
